/* Input Styles */

//************************************************************************//
// Generate a variable ($all-text-inputs) with a list of all html5
// input types that have a text-based input, excluding textarea.
//************************************************************************//
$inputs-list: 'input[type="email"]',
              'input[type="number"]',
              'input[type="password"]',
              'input[type="search"]',
              'input[type="tel"]',
              'input[type="text"]',
              'input[type="url"]',

              // Webkit & Gecko may change the display of these in the future
              'input[type="color"]',
              'input[type="date"]',
              'input[type="datetime"]',
              'input[type="datetime-local"]',
              'input[type="month"]',
              'input[type="time"]',
              'input[type="week"]';

$unquoted-inputs-list: ();

@each $input-type in $inputs-list {
    $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}

$all-text-inputs: $unquoted-inputs-list;

// You must use interpolation on the variable:
// #{$all-text-inputs}
// e.g. #{$all-text-inputs}, textarea { border: 1px solid red; }


//************************************************************************//
// Input Focus
//************************************************************************//
$inputs-focus-list: 'input[type="email"]:focus',
              'input[type="number"]:focus',
              'input[type="password"]:focus',
              'input[type="search"]:focus',
              'input[type="tel"]:focus',
              'input[type="text"]:focus',
              'input[type="url"]:focus',

              // Webkit & Gecko may change the display of these in the future
              'input[type="color"]:focus',
              'input[type="date"]:focus',
              'input[type="datetime"]:focus',
              'input[type="datetime-local"]:focus',
              'input[type="month"]:focus',
              'input[type="time"]:focus',
              'input[type="week"]:focus';

$unquoted-inputs-focus-list: ();

@each $input-focus-type in $inputs-focus-list {
    $unquoted-inputs-focus-list: append($unquoted-inputs-focus-list, unquote($input-focus-type), comma);
}

$all-text-inputs-focus: $unquoted-inputs-focus-list;

// You must use interpolation on the variable:
// #{$all-text-inputs-focus}
// e.g. #{$all-text-inputs-focus}, textarea:focus { border: 1px solid red; }


//************************************************************************//
// Generate a variable ($all-button-inputs) for Buttons.
//************************************************************************//
$button-inputs-list: 'button',
              'input[type="button"]',
              'input[type="reset"]',
              'input[type="submit"]';

$unquoted-button-inputs-list: ();

@each $button-input-type in $button-inputs-list {
    $unquoted-button-inputs-list: append($unquoted-button-inputs-list, unquote($button-input-type), comma);
}

$all-button-inputs: $unquoted-button-inputs-list;

// You must use interpolation on the variable:
// #{$all-button-inputs}
// e.g. #{$all-button-inputs} { border: 1px solid red; }


//************************************************************************//
// Generate a variable ($all-button-inputs-hf) for Buttons Hover and Focus Effect.
//************************************************************************//
$button-inputs-hf-list: 'button:hover',
                'input[type="button"]:hover',
                'input[type="reset"]:hover',
                'input[type="submit"]:hover',

                // Focus
                'button:focus',
                'input[type="button"]:focus',
                'input[type="reset"]:focus',
                'input[type="submit"]:focus';

$unquoted-button-inputs-hf-list: ();

@each $button-input-hf-type in $button-inputs-hf-list {
    $unquoted-button-inputs-hf-list: append($unquoted-button-inputs-hf-list, unquote($button-input-hf-type), comma);
}

$all-button-inputs-hf: $unquoted-button-inputs-hf-list;

// You must use interpolation on the variable:
// #{$all-button-inputs-hf}
// e.g. #{$all-button-inputs-hf} { border: 1px solid red; }


//************************************************************************//
// Generate a variable ($all-button-inputs-active) for Buttons Active Effect.
//************************************************************************//
$button-inputs-active-list: 'button:active',
                'input[type="button"]:active',
                'input[type="reset"]:active',
                'input[type="submit"]:active';

$unquoted-button-inputs-active-list: ();

@each $button-input-active-type in $button-inputs-active-list {
    $unquoted-button-inputs-active-list: append($unquoted-button-inputs-active-list, unquote($button-input-active-type), comma);
}

$all-button-inputs-active: $unquoted-button-inputs-active-list;

// You must use interpolation on the variable:
// #{$all-button-inputs-active}
// e.g. #{$all-button-inputs-active} { border: 1px solid red; }

// All inputs with select and textarea style
#{$all-text-inputs}, select, textarea {
    background: $input-background;
    border: 1px solid $input-border;
    font-size: $base-font-size - 1;
    margin: 0;
    padding: 5px;
    width: 72%;
}

// Input with email class
input.email { width: 64%; }

// Remove padding for select list
select { padding: 0; }

// All inputs with select and textarea foucs style
#{$all-text-inputs-focus}, select:focus, textarea:focus { border-color: darken($input-background, 20%); }

// Buttons Style
#{$all-button-inputs}, .rtp-button {
    @include background-image(linear-gradient($button-gradient-color-top, $button-gradient-color-bottom));
    border: 1px solid $input-border;
    @include border-radius(3px);
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font-size: $base-font-size - 2;
    font-weight: bold;
    margin: 0;
    outline: none;
    overflow: visible;
    padding: 6px 10px 5px;
    position: relative;
    text-align: center;
    text-decoration: none;
    @include text-shadow(1px 1px 0 rgba($white, 1));
}

// Buttons Hover and Focus Style
#{$all-button-inputs-hf}, .rtp-button:hover, .rtp-button:focus {
    @include background-image(linear-gradient($button-hover-gradient-color-top, $button-hover-gradient-color-bottom));
}

// Buttons Active Style
#{$all-button-inputs-active}, .rtp-button:active {
    @include background-image(linear-gradient($button-active-gradient-color-top, $button-active-gradient-color-bottom));
}

// Buttons Disabled Style
button[disabled], input[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Placeholder Text Color */
// Webkit
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: darken($white, 40%);
}

// Firefox
input:-moz-placeholder, textarea:-moz-placeholder {
    color: darken($white, 40%);
}

/* Box Sizing: Very useful for responsive structure */
input, textarea, select, button, rtp-button {
    @include box-sizing(border-box);
}

/* Label Cursor */
label { cursor: pointer; }

/* End - Input Styles */